<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box1 {
        width: 200px;
        height: 200px;
        background-color: chartreuse;
        margin-left: 100px;
        margin-top: 100px;
        /* overflow: hidden; */
        /*这是第一种解决方法，给父盒子加清除浮动*/
        /* border-top: 1px solid #ffffff; */
        /*这第二种就是给父盒子加一个上边，就可以解决边距问题，不推荐，太土了*/
    }

    .box2 {
        height: 100px;
        width: 100px;
        background-color: chocolate;
        /* 第五种方法 */

        /* float: left; */
        /* 第三种方法 */
        /* position: absolute; */
        margin-top: 100px;
        /* 第四种方法 */
        /* display: inline-block; */
        /*这里原本想达到的效果是在父盒子的内部向下移100px，但是由于边距重叠，不起作用，所以要用上边的方法*/
        margin-left: 50px;
    }
</style>

<body>
    <div class="box1">
        <div class="box2">2</div>

    </div>
</body>

</html>